<template>
  Name : {{ Name }}
  <br />
  info name: {{ info.name }}
  <br />
  info age : {{ info.age }}
  <br />
  <button @click="btnClickName">change Name</button>
  <button @click="btnClick">改变info.name</button>
  <button @click="btnClickChangeAge">改变info.age</button>
</template>

<script>
import { computed, reactive, ref, watch } from 'vue'
export default {
  setup() {
    const Name = ref('jd')
    const info = reactive({
      name: 'qq',
      age: 18,
    })
    const btnClickName = () => {
      Name.value += 'pp'
    }
    const btnClick = () => {
      info.name += 'qq'
    }
    const btnClickChangeAge = () => {
      info.age += 10
    }
    // 传入一个get函数包含需要监听的数据
    watch(
      () => info.name,
      (newV, oldV) => {
        console.log('监听get info.name', newV, oldV)
      }
    )
    // 传入一个reactive对象
    watch(info, (newV, oldV) => {
      console.log('监听reactive对象', newV, oldV)
    })
    // 传入一个ref对象
    watch(Name, (newV, oldV) => {
      console.log('监听ref对象', newV, oldV)
    })
    // 传入一个数组监听多个数据源，以上方式最终都会转化为get函数的方式
    watch([Name, info], (newVArr, oldVArr) => {
      console.log('监听ref对象数组的', newVArr, oldVArr)
    })
    return {
      Name,
      info,
      btnClickName,
      btnClick,
      btnClickChangeAge,
    }
  },
}
</script>
<style scoped></style>
